<template>
  <div class='page-container'>

    <el-table  v-loading="OtherConfig.loading" :data="tableData" :header-cell-style="{ backgroundColor: '#ecf5ff' }" border stripe style="width: 100%"
      max-height="500" @selection-change="handleSelectionChange">
      <!-- 是否显示选择框 复选框 -->
      <el-table-column type="selection" v-if="OtherConfig.showCheckBox" width="55" />

      <el-table-column v-for="item in tableHeader" :align="item.align ||'left'" :label="item.label" :prop="item.prop" :min-width="item.width || 60">
        <template v-if="item.type == 'image'" #default="scope">
          <el-image :src="scope.row.image" style="width: 50px; height: 50px" />
        </template>
        <template v-if="item.type == 'slot'" #default="scope">
          <slot :name="item.prop"  :rowData="scope.row"></slot>
        </template>

      </el-table-column>

      <!-- <el-table-column label="学生姓名" prop="stuName" min-width="80"></el-table-column> -->
      <!-- <el-table-column label="操作列" prop="Operate" min-width="80">
        <template #default="scope">
          <slot name="Operate" :rowData="scope.row"></slot>
        </template>
      </el-table-column> -->


    </el-table>

  </div>
</template>
<script setup lang='ts'>
/**
 * 模块引入
 */
import { reactive, ref } from 'vue';

/**
 * 数据
 */
const props = defineProps({
  tableHeader: {
    type: Array,
    require: true
  },
  tableData: {
    type: Array,
    default: []
  },
  OtherConfig: {
    type: Object,
    default: {
      showCheckBox: false,
      loading:false
    }
  }
})
const emit = defineEmits([
  "deleteAll"
]);
console.log("tableHeader=================================", props.tableHeader)

const state = reactive({});
/**
 * 功能方法
 */
// 数据选择
const handleSelectionChange = (val) => {
  console.log("被选中的数据", val);
  let ids = val.map((item) => {
    return item.id;
  });

  console.log("被选中的", ids);
  emit("deleteAll", ids);
};
</script>
<style lang='scss' scoped>
.page-container {}
</style>